layui.define('element',function (exports) {
	var $ = layui.$,
	element = layui.element,
	opt ='',
	Tabs = function(){
		var t = this;
		t.config = {
			breadth:30,
			leftshift:'<div class="leftshift"><i class="iconfont icon-left"></i></div>',
			rightshift:'<div class="rightshift"><i class="iconfont icon-right"></i></div>',
			callback:''
		}
	};
	Tabs.prototype.set = function (option) {
		var t = this;
		$.extend(true, t.config,option);
		return t;
	},
	Tabs.prototype.render = function(option){
		var t = this;
		var option = $.extend(true, t.config,option);
		opt = option;
		tt(option);
	}
	var tt = function(option){
		element.render('tab',option.filter);
		var filter = '.layui-tab'+'[lay-filter="'+option.filter+'"]';
		var width = $(filter).parent().outerWidth(true);
		var len = $(filter).find('.layui-tab-title').children().length;
		var totalWidth = 0,i=0,n=0,order=true;
		$(filter).find('.layui-tab-title').children().each(function(index,element){
			totalWidth += $(element).outerWidth(true);
		});
		$(filter).find('.layui-tab-title').children().each(function(index,element){
			width -= $(element).outerWidth(true);
			if(width<0){
				n = index;
				return false;
			}
		})
		if(totalWidth>$(filter).parent().outerWidth(true)){
			$(filter).find('.layui-tab-title').css('width',totalWidth);
			if($(filter).parent().find('.rightshift').length == 0){
				$(filter).after(option.rightshift);
			}
			$(filter).width(function(){
				var w =0;
				$(filter).find(".layui-tab-title").children().slice(i,n).each(function(index,dom){
					w += $(dom).outerWidth(true);
				})
				return w;
			});
		}else{
				n = len;
		}
		$('body').on("click",'.rightshift',function(){
			i +=n;
			if($(filter).parent().find('.leftshift').length == 0){
				$(filter).before(option.leftshift);
			}else{
				$(filter).parent().find('.leftshift').show();
			}
			if(i<$(filter).find(".layui-tab-title").children().length){
				$(filter).find(".layui-tab-title").children().slice(i-n,i).hide();
				$(filter).width(function(){
					var w =0;
					$(filter).find(".layui-tab-title").children().slice(i,i+n).each(function(index,dom){
						w += $(dom).outerWidth(true);
					})
					return w;
				});
			}
			if($(filter).find(".layui-tab-title").children().length-i<=n){
				$(this).hide();
			}
		})
		$('body').on("click",'.leftshift',function(){
			if($(filter).parent().find('.rightshift').length > 0){
				$(filter).parent().find('.rightshift').show();
			}
			if(i>0){
				if(i>$(filter).find(".layui-tab-title").children().length){
					i = i-n;
				}
				$(filter).width(function(){
					var w =0;
					$(filter).find(".layui-tab-title").children().slice(i-n,i).each(function(index,dom){
						w += $(dom).outerWidth(true);
					})
					return w;
				});
				$(filter).find(".layui-tab-title").children().slice(i-n,i).show();
				i = i-n;
				if(i == 0){
					$(this).hide();
				}
			}
		})
		element.on('tab('+option.filter+')', function(data){
			var pWidth = $(this).parent().parent().width();
			var width =0;
			$(filter).find(".layui-tab-title").children().slice(i,i+n).each(function(index,dom){
				width += $(dom).outerWidth(true);
			})
			if(width != pWidth){
				$(this).parent().parent().width(width);
			}
			if(option.callback){
				option.callback(this);
			}
		});
	};
	var tabs = new Tabs();
	$(window).resize(function(){
		setTimeout(function(){
			location.reload();
		},100)
	});
	exports('tabs',tabs);
})